<template>
  <div class="app-container dialog-w80">
    <div class="customContainer">
      <!-- 搜索头 -->
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        size="small"
      >
        <dj-store-select
          :category="173"
          :needItem="true"
          :defaultStore="formInline.store_id"
          @change="selectStoreChanged"
        />
        <el-form-item>
          <el-select v-model="formInline.time_type" style="width: 160px">
            <el-option
              v-for="item in time_type"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
          <el-date-picker
            v-model="pickerDate"
            value-format="yyyy-MM-dd"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select
            placeholder="选择入库方式"
            v-model="formInline.type"
            style="width: 160px"
            @change="inOutChange"
          >
            <el-option
              v-for="item in type_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
          <el-select
            v-if="formInline.type == 3"
            v-model="formInline.kua_type"
            filterable
            style="width: 160px"
          >
            <el-option
              v-for="item in type2_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
          <el-select
            v-if="formInline.type == 2"
            placeholder="选择"
            v-model="formInline.from"
            style="width: 120px"
          >
            <el-option
              v-for="item in type3_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
          <el-select
            v-if="formInline.type == 1"
            placeholder="选择"
            v-model="formInline.house_id"
            style="width: 160px"
            @change="houseChange"
          >
            <el-option
              v-for="item in houseList"
              :key="item.house_id"
              :label="item.house_name"
              :value="item.house_id"
            ></el-option>
          </el-select>
          <el-input
            v-if="formInline.type == 2"
            v-model="formInline.order_no"
            placeholder="请输入订单号"
            style="width: 120px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
      </el-form>
      <transition name="fade" mode="out-in">
        <!-- 表格 -->
        <el-table
          highlight-current-row
          :data="listData"
          v-loading.body="listLoading"
          border
          size="small"
          :key="formInline.type"
        >
          <el-table-column align="center" key="1" label="序号" width="50">
            <template slot-scope="scope">
              <span class="indexColor">{{
                scope.$index + 1 + (currentPage - 1) * 20
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" key="2" label="调拨单号">
            <template slot-scope="scope">
              <router-link
                v-if="!isShow"
                :to="{
                  name: 'report/receipt_gift_list',
                  params: { row: scope.row, global: global, routerflag: true },
                }"
                style="color: #409eff"
              >
                {{ scope.row.order_no }}</router-link
              >
              <el-button
                v-else
                @click="get_order_info(scope.row, scope.$index, 0)"
                type="text"
                size="small"
              >
                {{ scope.row.order_no }}</el-button
              >
            </template>
          </el-table-column>
          <el-table-column align="center" key="3" label="批次号" v-if="!isShow">
            <template slot-scope="scope">
              <router-link
                :to="{
                  name: 'report/receiving_lots_list',
                  params: { row: scope.row, global: global, routerflag: true },
                }"
                style="color: #409eff"
              >
                第{{ scope.row.no }}批次
              </router-link>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="出库仓"
            key="4"
            prop="store_out_name"
          ></el-table-column>
          <el-table-column
            align="center"
            label="入库仓"
            key="5"
            prop="store_in_name"
          ></el-table-column>
          <el-table-column
            align="center"
            label="下单时间"
            key="6"
            prop="create_time"
          ></el-table-column>
          <el-table-column
            align="center"
            label="入库时间"
            key="7"
            :prop="propChange"
          ></el-table-column>
          <el-table-column
            align="center"
            label="订单数量（个）"
            key="8"
            prop="order_num"
            v-if="isShow"
          ></el-table-column>
          <el-table-column
            align="center"
            label="订单金额（元）"
            key="9"
            prop="order_money"
            v-if="isShow"
          ></el-table-column>
          <el-table-column
            align="center"
            label="入库数量（个）"
            key="10"
            :prop="inStoreNum"
            v-if="isShow"
          ></el-table-column>
          <el-table-column
            align="center"
            label="入库金额（元）"
            key="11"
            :prop="inStoreMoney"
            v-if="isShow"
          ></el-table-column>
          <el-table-column
            align="center"
            label="本次入库数量（个）"
            key="12"
            prop="arrive_num"
            v-if="!isShow"
          ></el-table-column>
          <el-table-column
            align="center"
            label="本次入库金额（元）"
            key="13"
            prop="arrive_money"
            v-if="!isShow"
          ></el-table-column>
          <el-table-column
            align="center"
            label="总到货差额（个）"
            key="14"
            v-if="isShow"
          >
            <template slot-scope="scope">
              {{ scope.row.order_num * 1 - scope.row.totle_num * 1 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="签名" width="100">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.channel == 1"
                @click="showImg(scope.row.order_id)"
                type="text"
                size="small"
              >
                查看</el-button
              >
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="订单状态"
            key="15"
            v-if="isShow"
          >
            <template slot-scope="scope">
              <span v-if="showStutas && scope.row.status == 1">待神采审核</span>
              <span v-if="showStutas && scope.row.status == 2">待平台确认</span>
              <span v-if="showStutas && scope.row.status == 3">审核关闭</span>
              <span v-if="showStutas && scope.row.status == 4">出库关闭</span>
              <span v-if="showStutas && scope.row.status == 5">待发货</span>
              <span v-if="showStutas && scope.row.status == 6">已发货</span>
              <span v-if="showStutas && scope.row.status == 8">部分收货</span>
              <span v-if="showStutas && scope.row.status == 9">订单完成</span>
              <span v-if="showStutas && scope.row.status == 10">被打回</span>
              <!-- 神采平台 -->
              <span v-if="formInline.type == 1 && scope.row.status == 0"
                >待审核</span
              >
              <span v-if="formInline.type == 1 && scope.row.status == 1"
                >待出货</span
              >
              <span v-if="formInline.type == 1 && scope.row.status == 2"
                >待收货</span
              >
              <span v-if="formInline.type == 1 && scope.row.status == 3"
                >部分收货</span
              >
              <span v-if="formInline.type == 1 && scope.row.status == 4"
                >订单完结</span
              >
              <span v-if="formInline.type == 1 && scope.row.status == 5"
                >收货完成</span
              >
              <span v-if="formInline.type == 1 && scope.row.status == 6"
                >订单取消</span
              >
              <span v-if="formInline.type == 1 && scope.row.status == 10"
                >被打回</span
              >
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            key="16"
            label="订单状态"
            v-if="!isShow"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.status == 1">待入库</span>
              <span v-if="scope.row.status == 2">入库中</span>
              <span v-if="scope.row.status == 3">入库完成</span>
            </template>
          </el-table-column>
        </el-table>
      </transition>
    </div>
    <!-- 图片弹窗 -->
    <el-dialog
      class="img_diag"
      :close-on-click-modal="false"
      :visible.sync="img_dialog"
    >
      <div>
        <div v-if="gift_img">礼品专员签字：</div>
        <img style="width: 250px" v-if="gift_img" :src="gift_img" alt="" />
        <div v-if="store_img">店员签字：</div>
        <img style="width: 250px" v-if="store_img" :src="store_img" alt="" />
      </div>
    </el-dialog>
    <!-- 弹框 -->
    <el-dialog
      :close-on-click-modal="false"
      title="调拨明细"
      :visible.sync="detail_dialog"
    >
      <el-table
        highlight-current-row
        :data="infolist"
        v-loading.body="listLoading"
        border
        size="small"
      >
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">
            <span class="indexColor">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="图片" width="70">
          <template slot-scope="scope">
            <img :src="scope.row.thumb" width="50" height="50" />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="礼品名称"
          prop="gift_name"
        ></el-table-column>
        <el-table-column
          align="center"
          label="新礼品编号"
          prop="gift_id"
        ></el-table-column>
        <el-table-column
          align="center"
          label="神采礼品编号"
          prop="no_obsolete"
        ></el-table-column>
        <el-table-column
          align="center"
          label="成本价"
          prop="money_cost"
        ></el-table-column>
        <el-table-column
          align="center"
          label="调拨总数量"
          prop="num_final"
        ></el-table-column>
        <el-table-column
          align="center"
          label="调拨总金额"
          prop="money_totle"
        ></el-table-column>
        <el-table-column
          v-if="formInline.type == 1"
          align="center"
          label="到货总额"
          prop="arrive_money"
        >
        </el-table-column>
        <el-table-column
          v-if="formInline.type == 1"
          align="center"
          label="到货数"
          prop="arrive_num"
        >
        </el-table-column>
      </el-table>
      <!-- 自定义底部 -->
      <div class="bottom_box">
        <p class="pull-right" style="line-height: 0">
          礼品数量合计:{{ totalOrder }}礼品金额合计:{{
            totalPrice | keepTwoNum
          }}
        </p>
      </div>
    </el-dialog>
    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-pagination
        class="pull-left"
        background
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="20"
        layout="prev, pager, next, jumper"
        :total="totalDataNumber"
      >
      </el-pagination>
      <div
        class="pull-right"
        style="margin-top: 8px; font-size: 14px; color: #606266"
      >
        <span v-if="listData" class="mt10">
          调拨单礼品{{ formInline.from == 2 ? "出" : "入" }}库总数（个）:
          {{ totle_num ? totle_num : 0 }}调拨单{{
            formInline.from == 2 ? "出" : "入"
          }}库总金额（元）: {{ totle_money | keepTwoNum }}
        </span>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getList,
  getPage,
  houseList,
  getinfoList,
  getExport,
} from "@/api/storage_control/giftAllot_form";
import { getUserImg } from "@/api/storage_control/look_in_allocating";
import {
  pickerOptionsF,
  pickerDateF,
  pickerDateDot,
  optionMaxTime,
} from "@/utils";
import { DjStoreSelect } from "@/components/store";
export default {
  components: {
    "dj-store-select": DjStoreSelect,
  },
  data() {
    return {
      global: {
        store_name: "",
        start_time: "",
        end_time: "",
      },
      exportLoading: false,
      type_list: [
        { id: "1", name: "店内仓调拨" },
        { id: "2", name: "店外仓调拨" },
        { id: "3", name: "跨平台调拨" },
      ],
      type2_list: [
        { id: "1", name: "其他平台调入订单" },
        { id: "2", name: "神采平台调出订单" },
      ],
      type3_list: [
        { id: "1", name: "其他仓调入" },
        { id: "2", name: "本店仓调出" },
      ],
      time_type: [
        { id: "1", name: "按下单时间" },
        { id: "2", name: "按入库时间" },
      ],
      isType1: true,
      isShow: false,
      totle_money: 0,
      totle_num: 0,
      houseList: [],
      listData: null,
      listLoading: false,
      detail_dialog: false,
      img_dialog: false,
      currentPage: 1,
      totalDataNumber: 0,
      detailList: [],
      store_list: null,
      totalOrder: "0",
      totalPrice: "0",
      infolist: [],
      exportForm: [],
      propChange: null,
      inStoreNum: null,
      inStoreMoney: null,
      showStutas: null,
      gift_img: "", //礼品专员签字
      store_img: "", //店员签字
      formInline: {
        start_time: "",
        end_time: "",
        store_id: this.$store.getters.optionId,
        order_no: "",
        house_id: "",
        type: "1",
        kua_type: "2",
        from: "",
        status: -1,
        look_del: "0",
        time_type: "1",
      },
      pickerOptions: pickerOptionsF(),
      pickerDate: pickerDateDot(),
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.beforeComingIn();
    });
  },
  methods: {
    beforeComingIn() {
      if (this.$route.query.routerflag) {
        let col = this.$route.query.col;
        let start_time = this.$route.query.global.start_time;
        let end_time = this.$route.query.global.end_time;
        this.pickerDate = [start_time, end_time];
        this.formInline.store_id = this.$route.query.row.store_id;
        this.type_list = [
          { id: "2", name: "店外仓调拨" },
          { id: "3", name: "跨平台调拨" },
        ];
        this.type2_list = [{ id: "1", name: "其他平台调入订单" }];
        this.type3_list = [{ id: "1", name: "其他仓调入" }];
        this.formInline.type = "2";
        this.formInline.from = "1";
        this.formInline.kua_type = "1";
        this.formInline.time_type = "2";
        // this.searchClick();
      } else if (this.$route.params.routerflag) {
        this.pickerDate = this.$route.params.time;
        this.formInline.store_id = this.$route.params.id;
        this.formInline.type = "2";
        this.formInline.from = "1";
        this.formInline.kua_type = "1";
        this.formInline.time_type = "2";
      }
    },
    // 门店搜索
    selectStoreChanged(obj, item) {
      for (let key in obj) this.formInline[key] = obj[key];
      this.global.store_name = item.name;
      this.getHouse();
    },
    // 入库方式搜索
    inOutChange() {
      this.formInline.from =
        this.formInline.type == "1" || this.formInline.type == "3" ? "" : "1";
      this.searchClick();
    },
    // 店内仓搜索
    houseChange(val) {
      this.formInline.house_id = val;
      this.searchClick();
    },
    getHouse() {
      houseList({ store_id: this.formInline.store_id, cang: 1 }).then(
        (response) => {
          this.houseList = response;
          this.formInline.house_id =
            response.length > 0 ? response[0].house_id : "";
          this.searchClick();
        }
      );
    },
    //获取签字图片
    showImg(transfer_id) {
      this.img_dialog = true;
      getUserImg({ transfer_id }).then((res) => {
        if (res.data.length > 0) {
          this.gift_img = res.data.find((val) => val.user_type == 1).img;
          this.store_img = res.data.find((val) => val.user_type == 2).img;
        }
      });
    },
    // 导出
    exportClick() {
      if (this.exportForm.length > 20) {
        this.$message({
          type: "error",
          message: "由于数据量较大，一次最大只能导出20条",
        });
        return;
      }
      const idArr = [];
      this.exportForm.forEach(function (val, index) {
        idArr.push(val.id);
      });
      getExport({ type: 1, order_id: idArr.join(",") });
      this.exportLoading = true;
      this.$refs.cd.countDownF(30).then(() => {
        this.exportLoading = false;
      });
    },
    // 打开订单详情
    get_order_info(row, index, status) {
      this.detail_dialog = true;
      getinfoList(
        { order_id: row.order_id, step: "in" },
        this.formInline.type
      ).then((response) => {
        this.infolist = response;
        this.count();
      });
    },
    // 计算
    count() {
      var totalPrice = 0; //临时总价
      var totalOrder = 0;
      this.infolist.forEach(function (val, index) {
        totalPrice += val.order_num * 1 * val.money_cost * 1; //累计总价
        totalOrder += val.order_num * 1;
      });
      this.totalPrice = parseFloat(totalPrice);
      this.totalOrder = parseFloat(totalOrder);
    },
    // 搜索
    searchClick() {
      if (
        this.formInline.type == 2 ||
        (this.formInline.type == 3 && this.formInline.kua_type == 1)
      ) {
        this.isShow = false;
        this.propChange = "arrive_time";
        this.showStutas = false;
      } else {
        this.isShow = true;
        if (this.formInline.type == 3 && this.formInline.kua_type == 2) {
          this.propChange = "arrive_time";
          this.inStoreNum = "arrive_num";
          this.inStoreMoney = "arrive_money";
          this.showStutas = true;
        } else {
          this.propChange = "update_time";
          this.inStoreNum = "totle_num";
          this.inStoreMoney = "totle_money";
          this.showStutas = false;
        }
      }
      optionMaxTime(this.pickerDate).then(() => {
        //最大可选择时间区间
        this.formInline.start_time = this.pickerDate ? this.pickerDate[0] : "";
        this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : "";
        this.fetchData();
      });
    },
    // 列表获取
    fetchData() {
      let data = JSON.parse(JSON.stringify(this.formInline));
      if (this.formInline.type == 3) {
        data.type = data.kua_type;
      }
      this.listLoading = true;
      this.currentPage = 1;
      getPage(data, this.formInline.type)
        .then((response) => {
          this.totalDataNumber = response.page * 20;
          this.totle_money = response.totle_money;
          this.totle_num = response.totle_num;
          getList(data, 1, this.formInline.type).then((response) => {
            response.forEach((val) => {
              val.order_money = (val.order_money * 1).toFixed(2);
              val.totle_money = (val.totle_money * 1).toFixed(2);
              val.arrive_money = (val.arrive_money * 1).toFixed(2);
            });
            this.listData = response;
            this.listLoading = false;
          });
        })
        .catch((res) => {
          this.listLoading = false;
        });
    },
    handleCurrentChange(val) {
      let data = JSON.parse(JSON.stringify(this.formInline));
      if (this.formInline.type == 3) {
        data.type = data.kua_type;
      }
      this.listLoading = true;
      getList(data, val, this.formInline.type).then((response) => {
        response.forEach((val) => {
          val.order_money = (val.order_money * 1).toFixed(2);
          val.totle_money = (val.totle_money * 1).toFixed(2);
          val.arrive_money = (val.arrive_money * 1).toFixed(2);
        });
        this.listData = response;
        this.listLoading = false;
      });
    },
  },
};
</script>

<style scope>
    .app-container /deep/ .img_diag .el-dialog{
        width: 300px;
    }

</style>